<template>
	<view class=" container">
		<view class="benefit_tab u-margin-bottom-20">

			<u-tabs-swiper ref="uTabs" :list="agentPolicyCostInfo" name="policyName" :current="current" @change="change"
				:is-scroll="true" swiperWidth="750" :show-bar="false" active-color="#9D60FF"></u-tabs-swiper>
		</view>
		<swiper :current="swiperCurrent" @animationfinish="animationfinish" class="swiper">
			<swiper-item class="swiper-item" v-for="(item, index) in agentPolicyCostInfo" :key="index">
				<scroll-view scroll-y style="height: 100%;width: 100%;">
					<view class="">
						<view class="flex list-item u-padding-20">
							<view class="flex-1">
								税点
							</view>
							<view class="">
								{{item.taxPoint}}%
							</view>
						</view>
						<view class="" v-for="(_item, _index) in list" :key="_index">

							<view class="" v-if="_item.payTypeCode=='POS'">
								<view class="" v-if="_item.cardType =='1'">
									<view class="flex list-item u-padding-20">
										<view class="flex-1">
											刷卡-贷记卡-T0
										</view>
										<view class="">
											{{_item.t0MinRate}}%+{{_item.cashFee}}元
										</view>
									</view>
									<view class="flex list-item u-padding-20 ">
										<view class="flex-1">
											刷卡-贷记卡-T1
										</view>
										<view class="">
											{{_item.t1Rate}}%
										</view>
									</view>
								</view>
								<view class="" v-if="_item.cardType =='2'">
									<view class="flex list-item u-padding-20">
										<view class="flex-1">
											刷卡-借记卡-T0
										</view>
										<view class="">
											{{_item.t0Rate}}%+{{_item.cashFee}}元
										</view>
									</view>
									<view class="flex list-item u-padding-20 ">
										<view class="flex-1">
											刷卡-借记卡-T1
										</view>
										<view class="">
											{{_item.t1Rate}}%
										</view>
									</view>
								</view>
							</view>
							<view class="" v-if="_item.payTypeCode =='WX'">
								<view class="flex list-item u-padding-20">
									<view class="flex-1">
										微信
									</view>
									<view class="">
										{{_item.t1Rate}}%
									</view>
								</view>

							</view>
							<view class="" v-if="_item.payTypeCode =='ZFB'">
								<view class="flex list-item u-padding-20">
									<view class="flex-1">
										支付宝
									</view>
									<view class="">
										{{_item.t1Rate}}%
									</view>
								</view>

							</view>
							<view class="" v-if="_item.payTypeCode =='YL_CODE_LESS'">
								<view class="flex list-item u-padding-20">
									<view class="flex-1">
										移动二维码（≤1000元）
									</view>
									<view class="">
										{{_item.t1Rate}}%
									</view>
								</view>

							</view>
							<view class="" v-if="_item.payTypeCode =='YL_CODE_MORE'">
								<view class="flex list-item u-padding-20">
									<view class="flex-1">
										移动二维码（＞1000元）
									</view>
									<view class="">
										{{_item.t1Rate}}%
									</view>
								</view>

							</view>
							<view class="" v-if="_item.payTypeCode =='MOBILE_PAY'">
								<view class="flex list-item u-padding-20">
									<view class="flex-1">
										移动支付
									</view>
									<view class="">
										{{_item.t1Rate}}%
									</view>
								</view>

							</view>
						</view>



					</view>
				</scroll-view>


			</swiper-item>
		</swiper>

		<u-button class="u-m-t-50 u-margin-20" type="primary" :custom-style="customStyle" v-if="flag=='1'"
			@click="changeConfigure()">修改成本</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyle: {
					// 注意驼峰命名，并且值必须用引号包括，因为这是对象
					backgroundColor: '#FF8625'
				},
				agentPolicyCostInfo: [],
				itemTabs: [{
					name: '今日'
				}, {
					name: '昨日'
				}, {
					name: '本月'
				}],
				current: 0,
				swiperCurrent: 0,
				list: [],
				flag: null,
				agentNo: ""
			}
		},
		onLoad(options) {
			this.agentPolicyCostInfo = JSON.parse(decodeURIComponent(options.agentPolicyCostInfo));
			this.list = this.agentPolicyCostInfo[this.current].costList;
			this.flag = options.flag;
			this.agentNo = options.agentNo;
		},
		methods: {
			change(index) {
				this.swiperCurrent = index;
				console.log("index=" + index)

			},
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			changeConfigure() {
				this.$u.route({
					url: 'packageA/pages/main/agent/agentChangeCostAllocation',
					params: {
						"agentPolicyCostInfo": this.$route.query.agentPolicyCostInfo,
						agentNo: this.agentNo

					}
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	.container {

		&__title {
			font-weight: bold;
		}
	}

	.bg {
		background-color: #f6f6f6;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
	}

	.swiper {
		height: 100vh-40;
		background-color: white;

	}
</style>